<template>
	<div class="dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" :close-on-click-modal="false" width="500px">
			<el-form ref="formRef" label-width="auto" :model="state.ruleForm" :rules="state.rules">
				<el-form-item label="评论用户" prop="user_id">
					<el-select
						v-model="state.ruleForm.user_id"
						clearable
						placeholder="请输入关键字/选择用户"
						filterable
						remote
						:remote-method="userIdRemoteMethod"
						remote-show-suffix
						:loading="state.userIdSelect.loading"
						@focus="onUserIdFocus"
					>
						<el-option v-for="item in state.userIdSelect.options" :key="item.id" :label="item.nickname" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="商品评分" prop="rating">
					<el-select v-model="state.ruleForm.rating" clearable placeholder="请选择商品评分">
						<el-option label="一颗星" value="1" />
						<el-option label="二颗星" value="2" />
						<el-option label="三颗星" value="3" />
						<el-option label="四颗星" value="4" />
						<el-option label="五颗星" value="5" />
					</el-select>
				</el-form-item>
				<el-form-item label="评论内容" prop="content">
					<el-input v-model="state.ruleForm.content" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" placeholder="请输入评论内容" clearable />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="onCancel" size="default">取 消</el-button>
				<el-button type="primary" @click="onSubmit" :loading="state.dialog.submitLoading" size="default">提 交</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { nextTick, reactive, ref } from 'vue';

import { goodsEvaluateApi } from '/@/api';

let callback: Function = () => {};
const GoodsEvaluateApi = goodsEvaluateApi();
const state = reactive({
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	},
	ruleForm: {
		user_id: '',
		rating: '',
		content: '',
	},
	rules: {
		user_id: [{ required: true, message: '评论用户不能为空', trigger: ['blur', 'change'] }],
		rating: [{ required: true, message: '商品评分不能为空', trigger: ['blur', 'change'] }],
		content: [{ required: true, message: '评论内容不能为空', trigger: ['blur'] }],
	},
	userIdSelect: {
		loading: false,
		options: [] as any,
	},
});
const formRef = ref();

/********** 触发事件 **********/
// 关联用户获取焦点
const onUserIdFocus = () => {
	if (state.ruleForm.user_id) return;
	_goodsUserList({ pageNum: 1, pageSize: 10 });
};
// 取消
const onCancel = () => {
	state.dialog = {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	};
};
// 提交
const onSubmit = () => {
	formRef.value.validate((valid: boolean) => {
		if (!valid) return;
		state.dialog.submitLoading = true;
		if (state.dialog.type === 'add') {
			_goodsEvaluateAdd(state.ruleForm);
		} else {
			_goodsEvaluateEdit(state.ruleForm);
		}
	});
};

/********** 方法事件 **********/
// 打开
const openDialog = (data: any, row: any, fn: Function) => {
	state.dialog = {
		isShowDialog: true,
		type: data.type,
		title: data.title,
		submitLoading: false,
	};
	callback = fn;
	nextTick(() => {
		formRef.value.resetFields();
		if (state.dialog.type !== 'add') {
			state.ruleForm = {
				...row,
				evaluate_id: row.id,
			};
			state.userIdSelect.options = [{ id: row.user_id, nickname: row.nickname }]
		}
	});
};
// 关联供应商搜索选择
const userIdRemoteMethod = (query: string) => {
	if (!query) return;
	_goodsUserList({ pageNum: 1, pageSize: 10, nickname: query });
};

/********** 网络请求 **********/
// 搜索选择用户
const _goodsUserList = (params: Object) => {
	state.userIdSelect.loading = true;
	GoodsEvaluateApi.goodsUserList(params)
		.then((res) => {
			state.userIdSelect.options = res.data.list;
			state.userIdSelect.loading = false;
		})
		.catch(() => (state.userIdSelect.loading = false));
};
// 添加评论
const _goodsEvaluateAdd = (params: Object) => {
	GoodsEvaluateApi.goodsEvaluateAdd(params)
		.then(() => {
			ElMessage.success('操作成功！');
			onCancel();
			callback();
		})
		.catch(() => (state.dialog.submitLoading = false));
};
// 编辑评论
const _goodsEvaluateEdit = (params: Object) => {
	GoodsEvaluateApi.goodsEvaluateEdit(params)
		.then(() => {
			ElMessage.success('操作成功！');
			onCancel();
			callback();
		})
		.catch(() => (state.dialog.submitLoading = false));
};

/********** 方法向父组件暴露 **********/
defineExpose({ openDialog });
</script>
